/*
       RedRocks Community College
 Student: Alex H Lee
 4/3/2020
Capstone Course CIS 289402
Instructor: Candace Garrod
Page: Style Sheet CSS
Purpose: This page Stores the custom classes ,images and the CSS for the Menu, Beer, Drinks, Dessert, contact us and catering pages for the GeJos website.
*/



/* Style for the font*/
        @font-face {
            src: url(Fonts/LeGriffeStdRegular.otf);
            font-family: Le_Griffe;
        }

        @font-face {
            src: url(Fonts/TiffanyStd.otf);
            font-family: Tiffany;
        }




/* Style for the the mobile version of the site*/
@media only screen and (max-width: 600px) {
    img {
        max-width: 100%;
        height: auto;
    }
 
}
/* Classes used to line up the text in the center of the page*/
    .menuwidth {
        width: 500px;
    }

    .divwrap {
        display: flex;
        justify-content: center;
    }

.centeritems {
    display: flex;
    justify-content: center;

}
/* Style for mobile site*/
.parallax {
    /* Set a specific height */
    min-height: 500px;
    /* Create the parallax scrolling effect */
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}





/* Style for the menu items in the web pages*/
        .menu {
            margin-bottom: 15px;
            max-width: 1200px;
            margin: 0 auto;
        }

        .menu_restName {
            text-align: center;
            font-size: 70px;
            margin-top: 0;
        }

        .menu_title {
            text-align: center;
        }

        .menu_section {
            margin-bottom: 30px;
        }

            .menu_section h3 {
                font-style: italic;
            }

        .menu_item {
            margin: 0 15px;
            position: relative;
        }

            .menu_item h4 {
                margin-bottom: 0px;
            }

        .price {
            display: block;
            float: right;
            font-size: 1.3em;
            position: absolute;
            bottom: 0px;
            right: 0;
            background-color: white;
            font-weight: bold;
            background-color: rgba(0,0,0,0.0);
        }



        .description {
            margin-top: 5px;
            font-style: italic;
            font-size: 1.3em;
            background-color: white;
            display: inline-block;
            max-width: 50%;
            background-color: rgba(0,0,0,0.0);
        }



        hr {
            border: none;
            border-top: 1px dotted black;
            margin-top: -20px;
        }

        footer:not(.app-footer) {
            text-align: center;
            font-size: 11px;
            font-style: italic;
        }

        @media (max-width: 575px) {
           
                .menu_title {
                text-align: center;
                font-size: 30px;
            }

            .menu_section h3 {
                text-align: center;
                font-size: 30px;
            }

            .menu_item {
                text-align: center;
            }

            .price {
                float: none;
                position: static;
                margin-top: 15px;
            }

            hr {
                display: none;
            }
        }
/* Style for the menu items ends*/



/* Style for the  navigation bar and the drop down menu*/
        .nav {
            background-color: black;
            border-image: linear-gradient(to bottom right, #ffffff 0%, #11701e 25%, #ff0000 50%, #ffffff 75%, #11701e 100%);
            border-image-slice: 1;
        }
	

            .nav ul {
		font-family: Le_Griffe;
                list-style-type: none;
                margin: 0;
                padding: 0;
                overflow: hidden;
                background-color: black;
                float: left:
                justify-content: space-evenly;
            }


            .nav li {
                float: left;
            }

                .nav li a {
                    display: block;
                    color: white;
                    text-align: center;
                    padding: 14px 16px;
                    text-decoration: none;
                }

                    .nav li a:hover {
                        background-color: #808080;
                    }



 .dropdown {
            float: left;
            overflow: hidden;
        }

            .dropdown .dropbtn {
                font-size: 1em;
                border: none;
                outline: none;
                color: white;
                padding: 14px 16px;
                background-color: inherit;
                font-family: inherit;
                margin: 0;
            }

            .nav a:hover, .dropdown:hover .dropbtn {
                background-color: red;
            }

        .dropdown-content {
            display: none;
            position: absolute;
            background-color: black ;
            min-width: 160px;
            box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
            z-index: 1;
        }

            .dropdown-content a {
                float: none;
                color: black;
                padding: 12px 16px;
                text-decoration: none;
                display: block;
                text-align: left;
            }

                .dropdown-content a:hover {
                    background-color: #ddd;
                }

        .dropdown:hover .dropdown-content {
            display: grid;
        }
 


/* Style for the  navigation bar and the drop down menu ends*/

/* Style to display the main content of the site.*/
        .container {
            width: 85%;
            height: 100%;
            position: absolute;
            right: 0;
            align-content: center;
        }

        .content {
            padding-right: 10px;
            padding-left: 10px;
            border: solid #ffd700;
            border-width: 15px;
            background-size: cover;
            background-repeat: no-repeat;
           
            background-color: white;
            margin-bottom: 10px;
            background-image: url("Images/Flag-Italy.png"); /*background image for the content*/
            background-position: center center;
            border-image: linear-gradient(to bottom right, #ffffff 0%, #11701e 25%, #ff0000 50%, #ffffff 75%, #11701e 100%);
            border-image-slice: 1;
        }

        .content2 {
            padding-right: 10px;
            padding-left: 10px;
            border: solid black;
            border-width: 15px;
            background-size: cover;
            background-repeat: no-repeat;
           
            background-color: white;
            margin-bottom: 10px;
            background-image: url("Images/Flag-Italy.png");
        }

/* Style for the back ground image*/
        body {
            background-image: url("Images/Shelly.png");
            background-color: black;
            background-size: cover;
            background-repeat: no-repeat;
            background-attachment: fixed;
        }
/* Style for the header*/
h1 {
    text-align: center;
   
    color: white;
    font-family: Le_Griffe;
    font-size: 150%;
    border-radius: 15px;
    background-color: black;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

        h2 {
            font-family: Tiffany;
            color: black;
            text-align: center;
            background-color: white;
            border-radius: 15px;
            background-size: cover;
            background-repeat: no-repeat;
            width: 100%;
            margin-left: auto;
            margin-right: auto;
        }

        h3 {
            font-family: Tiffany;
            color: black;
            text-align: center;
        }

        h4 {
            font-family: Tiffany;
            font-size: 1.3em;
            color: black;
          
        }

       .myBtn {
  display: none;
  position: fixed;
  bottom: 20px;
  right: 30px;
  z-index: 99;
  font-size: 18px;
  border: none;
  outline: none;
  background-color: red;
  color: white;
  cursor: pointer;
  padding: 15px;
  border-radius: 4px;
}

.myBtn:hover {
  background-color: #555;
}